<template>
  <div :style="fontStyle">
    <div class="rate" @mouseout="mouseout">
      <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
      <span class="hollow" :style="fontwidth">
        <span
          @click="onRate(num)"
          @mouseover="mouseOver(num)"
          v-for="num in 5"
          :key="num"
          >★</span
        >
      </span>
    </div>
  </div>
</template>

<script setup>
// 新的需求 添加主题，不同风格的星星
import { defineProps, computed, defineEmits, ref } from 'vue';

let props = defineProps({
  value: Number,
  theme: { type: String, default: 'orange' },
});

// 自身的状态
let width = ref(props.value);

let fontwidth = computed(() => `width: ${(width.value / 5) * 100}%`);

let rate = computed(() =>
  '★★★★★☆☆☆☆☆'.slice(5 - props.value, 10 - props.value)
);

let themeObj = {
  orange: '#ff9900',
  blue: '#007aff',
  green: '#5cb85c',
  red: '#ff5555',
  yellow: '#ffcc00',
  pink: '#ff69b4',
};

const fontStyle = computed(() => {
  return `color:${themeObj[props.theme]}`;
});

let emits = defineEmits(['update-rate']);

const onRate = num => {
  emits('update-rate', num);
};

function mouseOver(i) {
  width.value = i;
}

function mouseout() {
  width.value = props.value;
}
</script>

<style lang="css" scoped>
.rate {
  position: relative;
  display: inline-block;
}
.rate > span.hollow {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
}
</style>
